<template>
    <div class="common">
        <div class="common_bg">
            <div style="display: flex;">
                <div style="flex: 1;">
                    <span class="common_title">产能出海管理平台</span>
                </div>
                <div style="flex: 1; text-align: right;">
                    <div style="float: right;" class="common_btn" @click="jumpToLogin()">我要注册</div>
                    <div style="float: right;" class="common_btn2" @click="jumpToFactoryCheckIn()">工厂入住</div>
                    <div style="clear: both;"></div>
                </div>
            </div>
            <div>
                <el-carousel height="450px">
                    <el-carousel-item>
                        <img style="width: 100%;" src="./../assets/home/001.png" alt="" srcset="">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img style="width: 100%;" src="./../assets/home/002.png" alt="" srcset="">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img style="width: 100%;" src="./../assets/home/003.png" alt="" srcset="">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img style="width: 100%;" src="./../assets/home/004.png" alt="" srcset="">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <!-- <div style="margin: 10px auto;">
                <span>xx是湖北省武汉市东湖高新区光电子信息产业园与xx有限公司共建的光电子信息产业跨境平台，旨在依托湖北武汉光电子信息产业以及国内制造业的优势，主力千千万万跨境电商走出国门，让中国智造畅行世界。</span>
            </div> -->
            <div style="display: flex; margin: 10px auto;">
                <div style="flex: 1;">
                    <div class="title_div common_title_bg_color">
                        <div class="title_type" @click="jumpPage(1)">
                            <el-badge value="HOT">
                                <div style="line-height: 36px;">我要选品</div>
                            </el-badge>
                        </div>
                        <div class="cut_line"></div>
                        <ul>
                             <li class="title_list">百万级SKU爆品，供您选择</li>
                            <li class="title_list">新品直播间，助您快人一步</li>
                        </ul>
                    </div>
                </div>
                <div style="flex: 1;" >
                    <div class="title_div common_title_bg_color">
                        <div class="title_type" @click="jumpPage(2)">我要制造</div>
                        <div class="cut_line"></div>
                        <ul>
                            <li class="title_list">包料OEM，纯OEM代工，供您灵活选择</li>
                            <li class="title_list">ODM/JDM研发合作，实现您的产品想法</li>
                            <li class="title_list">小定制，小改款，助您打造专属爆品</li>
                        </ul>
                    </div>
                </div>
                <div style="flex: 1;">
                    <div class="title_div common_title_bg_color ">
                        <div class="title_type" @click="jumpPage(3)">我要服务</div>
                        <div class="cut_line"></div>
                        <ul>
                            <li class="title_list">关汇税服务，减少运营风险</li>
                            <li class="title_list">知识产权服务，减少侵权风险</li>
                            <li class="title_list">大数据选品，助你紧跟市场热点</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div style="margin: 40px auto;">
                <div style="display: flex;" class="link_style">
                    <div style="flex: 1; align-items: center;">
                        <div style="line-height: 50px; font-size: 30px; text-align: center; color: var(--color-base);">01</div>
                    </div>
                    <div style="flex: 8;">
                        <div style="font-size: 16px; font-weight: bold; margin: 10px 0; color: var(--color-font);">我们的供应链</div>
                        <div style="font-size: 14px; margin: 0 20px; color: var(--color-font);">供应链信息，供应链信息，供应链信息，供应链信息，供应链信息，供应链信息，供应链信息，供应链信息，供应链信息，供应链信息，供应链信息。</div>
                    </div>
                    <div style="flex: 1;">
                        <el-button style="margin: 0 20px; color: var(--color-base);" type="text">详细了解</el-button>
                    </div>
                </div>
                <div style="display: flex;" class="link_style">
                    <div style="flex: 1; align-items: center;">
                        <div style="line-height: 50px; font-size: 30px; text-align: center; color: var(--color-base);">02</div>
                    </div>
                    <div style="flex: 8;">
                        <div style="font-size: 16px; font-weight: bold; margin: 10px 0; color: var(--color-font);">我们的供应链</div>
                        <div style="font-size: 14px; margin: 0 20px; color: var(--color-font);">供应链信息，供应链信息，供应链信息，供应链信息，供应链信息，供应链信息，供应链信息，供应链信息，供应链信息，供应链信息，供应链信息。</div>
                    </div>
                    <div style="flex: 1;">
                        <el-button style="margin: 0 20px; color: var(--color-base);" type="text">详细了解</el-button>
                    </div>
                </div>
            </div>
            <div style="margin-top: 40px; height: 100px;">
                <div class="common_title">全球招商</div>
                <div style="display: flex;">
                    <div style="flex: 1;">
                        <div class="home_btn">会员注册</div>
                    </div>
                    <div style="flex: 1;">
                        <div class="home_btn">工厂入住</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div style="margin-top: 40px; height: 100px; background-color: var(--color-common-00); color: var(--color-common-ff);">
            <div style="display: flex;">
                <div style="flex: 1"></div>
                <div style="flex: 1">关于我们</div>
                <div style="flex: 1">关于我们</div>
                <div style="flex: 1">关于我们</div>
                <div style="flex: 1"></div>
            </div>
            <div style="display: flex;">
                <div style="flex: 1"></div>
                <div style="flex: 1">关于我们</div>
                <div style="flex: 1">关于我们</div>
                <div style="flex: 1">关于我们</div>
                <div style="flex: 1"></div>
            </div>
            <div style="display: flex;">
                <div style="flex: 1"></div>
                <div style="flex: 1">关于我们</div>
                <div style="flex: 1">关于我们</div>
                <div style="flex: 1">关于我们</div>
                <div style="flex: 1"></div>
            </div>
            <div style="display: flex;">
                <div style="flex: 1"></div>
                <div style="flex: 1">关于我们</div>
                <div style="flex: 1">关于我们</div>
                <div style="flex: 1">关于我们</div>
                <div style="flex: 1"></div>
            </div>
        </div>
        <el-dialog
        title=""
        :visible.sync="dialogVisible"
        width="500px"
        :before-close="handleClose">
            <div style="display: flex;">
                <div style="flex: 1; text-align: center;">
                    <span :class="{login_type: login_type_active == '0'}" style="font-size: var(--fontsize-20);" @click="login_type_active = '0'">微信扫码登录</span>
                </div>
                <div style="flex: 1; text-align: center;">
                    <span :class="{login_type: login_type_active == '1'}" style="font-size: var(--fontsize-20);" @click="login_type_active = '1'">手机号登录</span>
                </div>
            </div>
            <div v-if="login_type_active == '0'" style="text-align: center;">
                <img style="width: 260px; margin: 20px 0;" src="./../assets/222.png" alt="">
            </div>
            <div v-if="login_type_active == '1'">
                <el-input placeholder="请输入手机号" style="width: 400px; margin: 30px;">
                    <i slot="prepend" class="el-icon-phone"></i>
                </el-input>
                <el-input placeholder="请输入验证码" style="width: 400px; margin: 30px;">
                    <i slot="prepend" class="el-icon-lock"></i>
                    <template slot="append">发送验证码</template>
                </el-input>
                <div>
                    <div class="login_btn">
                        登录
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'login',
    data() {
        return {
            id: "Hello Vue",
            pwd: "",
            login: {
                username: "damopan",
                password: ""
            },
            dialogVisible: false,
            login_type_active: "0"
        }
    },
    mounted() {
    },
    methods: {
        // 重复的方法会被 model 中的覆盖。 自己的方法会被保留。没有的方法会从 model 中继承
        jumpPage(index) {
            if(index == 1) {
                this.$router.push("/home/shoppingMall")
            } else if(index == 2) {
                this.$router.push("/home/superFactory")
            } else if(index == 3) {
                this.$router.push("/home/propertyRight")
            } else {
                window.location.reload()
            }
        },
        jumpToFactoryCheckIn() {
            const newPageUrl = "/FactoryCheckIn";
            window.open(newPageUrl, '_blank');
        },
        jumpToLogin() {
            this.dialogVisible = true
        },
        handleClose() {
            this.dialogVisible = false
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login {
    width: 100%;
    height: 100%;
}
.title_div {
    width: 300px;
    height: 200px;
    margin: 0 auto;
    border: 1px solid var(--color-base);
    border-radius: 19px;
    background-color: var(--color-common-ff);
}
.title_type {
    line-height: 80px;
    font-size: 24px;
    text-align: center;
    color: var(--color-font);
    font-weight: bold;
}
.cut_line {
    width: 200px;
    height: 3px;
    background-color: var(--color-base2);
    margin: 10px auto;
}
.title_list {
    text-align: left;
    color: var(--color-base);
    font-size: 14px;
    line-height: 26px;
}
.link_style {
    border: 1px solid var(--color-base);
    border-radius: 15px;
    margin: 10px auto;
}
.home_btn {
    width: 200px;
    height: 40px;
    line-height: 40px;
    margin: 15px auto;
    text-align: center;
    font-size: 16px;
    background-color: var(--color-base);
    color: var(--color-common-ff);
    border: 1px solid var(--color-base);
    border-radius: 15px;
}
.home_btn:hover {
    cursor: pointer;
}
.login_type {
    border-bottom: 2px solid var(--color-base);
}
.login_btn {
    width: 400px;
    height: 35px;
    line-height: 35px;
    margin: 30px;
    text-align: center;
    font-size: 16px;
    background-color: var(--color-base);
    color: var(--color-common-ff);
    border: 1px solid var(--color-base);
    border-radius: 15px;
}
</style>